<!--
* @author wn
* @date 2024/01/15 10:39:59
* @description: 支付结果
!-->
<template>
	<!-- 自定义状态栏 -->
	<view class="navbar" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
		<navigator open-type="navigateBack" class="back icon-left"></navigator>
		<view class="title">支付结果</view>
	</view>
	<scroll-view
		enable-back-to-top
		class="viewport"
		scroll-y
		@scrolltolower="getMore"
	>
		<!-- 订单状态 -->
		<view
			class="overview"
			:style="{ paddingTop: safeAreaInsets!.top + 48 + 'px' }"
		>
			<view class="status icon-checked">模拟支付成功</view>
			<view class="tips"
				>提示: 本小程序仅为教学演示用途，并未实际支付或购买商品或服务</view
			>
			<view class="buttons">
				<!-- 并关闭其他所有非 tabBar 页面 -->
				<navigator
					hover-class="none"
					class="button navigator"
					url="/pages/index/index"
					open-type="switchTab"
				>
					返回首页
				</navigator>
				<!-- 关闭当前页面，跳转到应用内的某个页面 -->
				<navigator
					hover-class="none"
					class="button navigator"
					:url="`/pagesOrder/detail/detail?id=${id}`"
					open-type="redirect"
				>
					查看订单
				</navigator>
			</view>
		</view>

		<!-- 猜你喜欢 -->
		<XtxGuess ref="guessRef" />
	</scroll-view>
</template>

<script setup lang="ts">
import { useGuess } from '@/hook/useGuess'
import { onLoad } from '@dcloudio/uni-app'

// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()

// 获取页面参数
const { id } = defineProps<{ id: string }>()

// 猜你喜欢
const { guessRef, getMore } = useGuess()

// 页面加载 -- 模拟支付提示
onLoad(() => {
	uni.showModal({
		title: '温馨提示',
		content: '此交易是模拟支付，您并未付款，不会导致实际购买商品或服务',
		confirmText: '知道了',
		showCancel: false,
	})
})
</script>
<style lang="scss">
.navbar {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9;
	width: 750rpx;
	text-align: center;
	background-color: $primary-color;
	color: #fff;
	.back {
		position: absolute;
		left: 0;
		height: 88rpx;
		width: 88rpx;
		line-height: 88rpx;
		font-size: 44rpx;
	}
	.title {
		height: 88rpx;
		line-height: 88rpx;
		font-size: 32rpx;
		font-weight: 500;
	}
}
.overview {
	line-height: 1;
	padding: 50rpx 0;
	color: #fff;
	background-color: $primary-color;
	.status {
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 36rpx;
		font-weight: 500;
		&::before {
			display: block;
			font-size: 110rpx;
			margin-bottom: 20rpx;
		}
	}
	.tips {
		width: 70%;
		font-size: 24rpx;
		text-align: center;
		line-height: 1.5;
		margin: 60rpx auto;
	}
	.buttons {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 60rpx;
		line-height: 60rpx;
		margin-top: 60rpx;
	}

	.button {
		text-align: center;
		margin: 0 10rpx;
		font-size: 28rpx;
		color: #fff;

		&:first-child {
			width: 200rpx;
			border-radius: 64rpx;
			border: 1rpx solid #fff;
		}
	}
}
</style>
